<template>
  <div class="toast-test">
    <van-cell-group title="基础展示" inset>
      <van-cell title="文字提示" clickable @click="onOpen()" />
      <van-cell title="成功提示" clickable @click="onOpenSuccess()" />
      <van-cell title="失败提示" clickable @click="onOpenFail()" />
      <van-cell title="顶部展示" clickable @click="onOpenPosition('top')" />
      <van-cell title="底部展示" clickable @click="onOpenPosition('bottom')" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "Toast-test",
  data() {
    return {};
  },
  methods: {
    onOpen() {
      this.$toast("文字提示");
    },
    onOpenSuccess() {
      this.$toast.success("成功提示");
    },
    onOpenFail() {
      this.$toast.fail("失败提示");
    },
    onOpenPosition(value) {
      this.$toast({
        message: value === "top" ? "顶部展示" : "底部展示",
        position: value,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>